<template>
	<a-drawer title="脚本详情" :width="700" :visible="visible"
		:footer-style="{ textAlign: 'center' }" @close="handleClose">
		<a-descriptions size="small" :column="3">
			<a-descriptions-item v-for="item in detailList"
				:label="item.label" :key="item.value">{{item.value}}</a-descriptions-item>
		</a-descriptions>

		<div class="detail_title">脚本内容</div>

		<a-card :title="card_item.name" :bordered="true" style="width: 100%; margin-top: 5px;" v-for="(card_item, card_index) in bottomList" :key="card_index">
			<template #extra>{{card_item.seconds_type==0?'自动':'固定'}}时长：{{card_item.seconds}}s</template>
			<div class="middle_con">
				<div class="title">场景描述</div>
				<div class="desc">{{card_item.remark}}</div>
			</div>
			<div class="bottom_con">
				<div class="bottom_item" v-for="(bottom_item, bottom_index) in card_item?.line_audio" :key="bottom_index">
					<div class="bottom_title">
						<a-tooltip>
						    <template #title>{{bottom_item.content}}</template>
						    {{bottom_item.content}}
						</a-tooltip>
					</div>
					<div class="lines_contact_icon">
						<cu-icon style="color: #999; font-size: 20px;" type='icon-lianjie' />
					</div>
					<div class="bottom_desc" v-if="bottom_item.duration_text">
						<cu-icon @click="previewAudio(bottom_item)" style="color: #666; font-size: 17px; cursor: pointer;" type='icon-bofang' />
						<span style="margin-left: 5px;">{{bottom_item.duration_text}}</span>
					</div>
					<div class="bottom_desc" v-else>未生成音频</div>
				</div>
			</div>
		</a-card>

		<template #footer>
			<a-space>
				<a-button @click="editScript">编辑脚本</a-button>
				<a-button type="primary" @click="useScript">使用脚本</a-button>
			</a-space>
		</template>
		
		<createScript :scriptDetail="scriptDetail" :visible="createVisible" @close="closeCreate" />
		<PreviewModal
			:type="previewObj.type"
			:visible="previewObj.visible"
			:url="previewObj.url"
			:title="previewObj.title"
			@onCancel="closePreview"
		/>
	</a-drawer>
</template>

<script>
	import {
		PlusOutlined
	} from '@ant-design/icons-vue';
	import {
		toRefs,
		defineComponent,
		reactive,
		ref,
		watch
	} from 'vue';
	import request from "../../../../../../common/utils/request";
	import createScript from "./createScript.vue";
	import {message} from 'ant-design-vue';
	import PreviewModal from "@/components/PreviewModal/index.vue";
	import store from '@/store';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			scriptId: {
				type: Number,
				default: 0
			},
			script_line_tag_id: {
				type: [Number, String],
				default: 0
			}
		},
		emits: ['close'],
		components: {
			createScript,
			PreviewModal
		},
		setup(props, context) {
			const state = reactive({
				searchWord: '',
				detailList: [],
				activeKey: 1,
				bottomList: [],
				scriptDetail: {},
				createVisible: false,
				previewObj: {
					type: 'audo',
					visible: false,
					url: '',
					title: ''
				}
			});
			
			const closeCreate = () => {
				state.createVisible = false
				getScriptDetail()
			}
			
			const editScript = () => {
				state.createVisible = true
			}
			
			const useScript = () => {
				let scriptParams = {
					title: state.scriptDetail?.title,
					audio_config: state.scriptDetail?.audio_config,
					subtitle_status: state.scriptDetail?.subtitle_status
				}
				
				if(JSON.stringify(state.scriptDetail?.subtitle_config) != '[]' && JSON.stringify(state.scriptDetail?.subtitle_config) != '{}'){
					scriptParams['subtitle_config'] = state.scriptDetail?.subtitle_config
				} else {
					scriptParams['subtitle_config'] = store.getters.clipJSON?.script_data?.subtitle_config
				}
				
				let resourceData = []
				state.scriptDetail.script_scenes.map((item, index)=> {
					let obj = {}
					resourceData.push({
						sn: index,
						name: item.name,
						video: [],
						remark: item.remark,
						items: item.line_audio,
						seconds: item.seconds,
						seconds_type: item.seconds_type,
						script_line_id: state.scriptDetail?.id
					})
				})
				
				store.dispatch('SetScriptData', scriptParams)
				store.dispatch('SetClipJSONResourceData', resourceData)
				message.success('应用成功！')
				context.emit('close')
			}
			
			const handleClose = () => {
				context.emit('close')
			}
			
			const getScriptDetail = () => {
				let postUrl = '/user/shotstack/script-line/org/detail'
				if(props?.script_line_tag_id == 'my'){
					postUrl = '/user/shotstack/script-line/detail'
				}
				request.get('/work_ai', postUrl, {
					scriptLineId: props.scriptId
				}).then(res=> {
					state.scriptDetail = res.detail
					state.detailList = [{
						label: '脚本名称',
						value: res.detail.title
					}, {
						label: '场景数量',
						value: res.detail.scene_count
					}, {
						label: '脚本时长',
						value: res.detail.duration
					}, {
						label: '使用次数',
						value: res.detail.used_count
					}, {
						label: '产出成片',
						value: res.detail.video_count
					}, {
						label: '场景音频字幕',
						value: res.detail.subtitle_status == 'on'?'开启':'关闭'
					}, {
						label: '音频配置',
						value: res.detail?.audio_config?.name
					}]
					state.bottomList = res.detail.script_scenes
				})
			}
			
			const previewAudio = (item) => {
				state.previewObj = {
					type: 'audio',
					url: item.audio_url,
					title: '预览-'+item.content,
					visible: true
				}
			}
			
			const closePreview = () => {
				state.previewObj = {
					type: 'audio',
					url: '',
					title: '',
					visible: false
				}
			}
			
			watch(()=>props.visible, val=>{
				if(val){
					getScriptDetail()
				}
			})
			
			return {
				...toRefs(state),
				editScript,
				useScript,
				handleClose,
				closeCreate,
				previewAudio,
				closePreview
			};
		},
	});
</script>

<style lang="less" scoped>
	.top_con {
		display: flex;
	}

	.middle_con {
		.title {
			color: #333;
			font-weight: bold;
		}

		.desc {
			color: #999;
			margin-top: 5px;
		}
	}

	.bottom_con {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		transform: translateX(-5px);
		border-top: 1px solid #eee;
		margin-top: 10px;
		padding-top: 10px;

		.bottom_item {
			width: 100%;
			margin-left: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 5px;
			.bottom_title {
				width: calc(50% - 10px);
				background-color: #fafafc;
				margin-top: 5px;
				cursor: pointer;
				padding: 3px 10px;
				color: #666;
			}
			
			.lines_contact_icon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30px;
			}

			.bottom_desc {
				width: calc(50% - 20px);
				background-color: #fafafc;
				margin-top: 5px;
				cursor: pointer;
				padding: 3px 10px;
				color: #666;
				display: flex;
				align-items: center;
			}
		}
	}
</style>